<template>
	<view>
		<!-- #ifdef MP -->
		<view class="cu-custom text-white" :style="{color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'}">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }">
				<view class="action mp text-bold">
					<!-- <text class="wlIcon-shezhi" style="margin-right: 0.6em;" @tap="$wanlshop.auth('/pages/user/setting/setting')"></text>
					<text class="wlIcon-shiyongbangzhu1" @tap="help"></text> -->
				</view>
				<!-- 背景 -->
				<view class="bar-bg" v-if="headerOpacity > 0" :style="{ 
					height: $wanlshop.wanlsys().height + 'px', 
					opacity: headerOpacity,
					backgroundColor: common.appStyle.user_nav_color?common.appStyle.user_nav_color:'#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.user_nav_image, 414, 0, 1, 'transparent', 'png') + ')'
				}"></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<view class="cu-custom" :style="{color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'}">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }">
				<view class="text-lg" @tap="$wanlshop.auth('/pages/user/setting/user')">
					<view v-if="headerOpacity == 1">
						<view class="cu-avatar round margin-right-xs" :style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 35, 35, 2, 'avatar') + ')' }"></view>
						<text v-if="user.isLogin">{{ user.nickname }}</text>
						<text v-else>登录 / 注册</text>
						
					</view>
				</view>
				<!-- 背景 -->
				<view class="bar-bg" v-if="headerOpacity > 0" :style="{ 
					height: $wanlshop.wanlsys().height + 'px', 
					opacity: headerOpacity,
					backgroundColor: common.appStyle.user_nav_color?common.appStyle.user_nav_color:'#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.user_nav_image, 0, 50, 1, 'transparent', 'png') + ')',
					color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'
				}"></view>
				<view class="action">
					<block>
						<text class="wlIcon-erweima" @tap="$wanlshop.auth('/pages/user/qrcode/qrcode')"></text>
						<text class="margin-right text-sm" @tap="$wanlshop.auth('/pages/user/qrcode/qrcode')">会员码</text>
					</block>
				
					<view class="cu-tag badge" v-if="statistics.notice.notice +statistics.notice.order +statistics.notice.chat > 0">{{ statistics.notice.notice +statistics.notice.order +statistics.notice.chat }}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="wanl-user" :style="{
			height: '244px',
			backgroundColor: '#ff4632',
			backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.user_bg_image, 414, 0, 1, 'transparent', 'png') + ')',
			color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'}">
			
			<view class="user" :style="{ paddingTop: $wanlshop.wanlsys().height + 'px' }">
			
				<view class="avatar margin-right-bj" @tap="portrai">
					<image class="round" :src="$wanlshop.oss(user.avatar, 62, 62, 2, 'avatar')" mode="widthFix"></image>
					<view style="" v-if="is_host == 1" class="zhubo1"><text v-if="is_host == 1">主播</text></view>
					<view style="" v-if="is_host == 2" class="zhubo"><text v-if="is_host == 2">经纪人</text></view>
				</view>
				<view class="content flex" v-if="user.isLogin">
					<view class="flex-sub">
						<view class="text-xxl" @tap="$wanlshop.auth('/pages/user/setting/user')">{{ user.nickname || "暂无" }}</view>
						<view class="text-sm" style="width: 70%;">
							<view class="cu-tag radius" style="background-color: #ff4632;color: #FFFFFF;padding: 0px 8px 0px 0px;font-size: 11px;margin: 3px 0px;">
								邀请码:
							</view>
							<view class="cu-tag radius" style="background-color: #ff4632;color: #FFFFFF;padding: 0px 0px;font-size: 13px;margin: 3px 0px;">
								<text>{{ user.invite_code }}</text>
								<text
									class="wlIcon-fuzhi margin-left-sm"
									@click.stop="$wanlshop.copy(user.invite_code, false)"
								></text>
							</view>
						</view>
						<view class="text-sm" style="width: 70%;" v-if="roleDic[user.role_type]">
							<view class="cu-tag radius" style="background-color: #ff4632;color: #FFFFFF;padding: 0px 8px 0px 0px;font-size: 11px;margin: 3px 0px;">
								用户级别:
							</view>
							<view class="cu-tag radius" style="background-color: #ff4632;color: #FFFFFF;padding: 0px 0px;font-size: 13px;margin: 3px 0px;">
								<text>{{ roleDic[user.role_type] }}</text>
							</view>
						</view>
					</view>					
					<view class="text-xxl pallet-box" style="width: 70rpx;" @tap="$wanlshop.auth('/pages/user/money/money')">
						<!-- <text class="wlIcon-qianbao"></text>	 -->
						<image src="/static/images/user/pallet.png" style="width: 100%;height: 50rpx;"></image>
						<text style="font-size: 20rpx;">钱包</text>
					</view>
				</view>
				<view class="content" @tap="$wanlshop.auth('/pages/user')" v-else>
					<view class="text-xxl">登录 / 注册</view>
			
					<view class="cu-tag wanl-bg-pink sm radius">Hi，欢迎登录</view>
				</view>
			</view>
		<view>
			<view class="activity padding-bj">
				<view class="bg-white radius grid text-center col-2 padding-lr-bj padding-tb-sm" style="height:90rpx;background-color: antiquewhite;">
					<view class=" flex justify-between" style="width: 100%;">
						<view class="content" style="width: 100%;">
							<view class="wanl-black text-sm text-bold6"><text>成为会员</text><text style="float: right;" @tap="$wanlshop.auth('/pages/user/money/recharge')">充值 ></text></view>
						</view>
					
					</view>
			
				</view>
			</view>
			
			<view class="wanl-user-order padding-sm margin-bj">
				<view><text style="font-size: medium;font-weight: 600;">我的订单</text><text style="float: right;" @tap="$wanlshop.auth('/pages/user/order/order')">查看全部订单 ></text></view>
				<view class="project text-sm wanl-gray-dark" style="margin-top: 20px;">
					<view @tap="$wanlshop.auth('/pages/user/order/order?state=1')">
						<text class=""></text>
						<view><image src="/static/images/user/payment.png" class="order_image"></image></view>
						待支付
						<view class="cu-tag badge bg-orange" v-if="statistics.order.pay > 0">{{ $wanlshop.toFormat(statistics.order.pay, 'hundred') }}</view>
					</view>
					<view @tap="$wanlshop.auth('/pages/user/order/order?state=2')">
						<text class=""></text>
						<view><image src="/static/images/user/payment.png" class="order_image"></image></view>
						待发货
						<view class="cu-tag badge bg-orange" v-if="statistics.order.delive > 0">{{ $wanlshop.toFormat(statistics.order.delive, 'hundred') }}</view>
					</view>
					<view @tap="$wanlshop.auth('/pages/user/order/order?state=3')">
						<text class=""></text>
						<view><image src="/static/images/user/payment.png" class="order_image"></image></view>
						待收货
						<view class="cu-tag badge bg-orange" v-if="statistics.order.receiving > 0">{{ $wanlshop.toFormat(statistics.order.receiving, 'hundred') }}</view>
					</view>
					<view @tap="$wanlshop.auth('/pages/user/order/order?state=4')">
						<text class=""></text>
						<view><image src="/static/images/user/payment.png" class="order_image"></image></view>
						待评价
						<view class="cu-tag badge bg-orange" v-if="statistics.order.evaluate > 0">{{ $wanlshop.toFormat(statistics.order.evaluate, 'hundred') }}</view>
					</view>
					<view class="" @tap="$wanlshop.auth('/pages/user/refund/lists')">
						<view><image src="/static/images/user/payment.png" class="order_image"></image></view>
						<text class=""></text>
						退换货
						<view class="cu-tag badge bg-orange" v-if="statistics.order.customer > 0">{{ $wanlshop.toFormat(statistics.order.customer, 'hundred') }}</view>
					</view>
				</view>
			</view>
			<view class="activity padding-bj" style="width: 100%;margin-top: -45rpx;box-sizing: border-box;">
			<view class="bg-white radius grid text-center col-2 padding-lr-bj padding-tb-sm" style="height:90rpx;background-color: currentcolor;border-radius: 0 0 24rpx 24rpx;">
				<view class="solid-right flex justify-between" style="width: 100%;">
					<view class="content" style="width: 100%;">
						<view class="wanl-black text-sm text-bold6" style="color: antiquewhite;">积分: <text style="    font-weight: 600;
    font-size: initial;
    margin-left: 20rpx;">{{user.score ? user.score : 0}}</text><text style="float: right;" @tap="$wanlshop.auth('/pages/user/signin/log')">查看明细</text></view>
					</view>
					
				</view>
				
			</view>
			</view>
			<view class="bottom">
				<uni-list class="menu-text">
				  <uni-list-item title="成为主播" v-if="common.setSwitch.zhuboswitch + '' === '1'" thumb="/static/images/user/zhubo.png" thumbSize="sm" link @click="host"   :border="false"></uni-list-item>
					 <uni-list-item title="成为经纪人" v-if="common.setSwitch.agnetswitch + '' === '1'" thumb="https://1miyc.com/assets/img/jingjiren.png" thumbSize="sm"  @click="agent" link   :border="false"></uni-list-item>
					 <uni-list-item title="成为代理商" v-if="common.setSwitch.platformswitch + '' === '1'" thumb="https://1miyc.com/assets/img/jingjiren.png" thumbSize="sm"  @click="agentPlatform" link   :border="false"></uni-list-item>
					 <uni-list-item title="业务经理" v-if="common.setSwitch.busswitch + '' === '1'" thumb="https://1miyc.com/assets/img/jingjiren.png" thumbSize="sm"  @click="staff" link   :border="false"></uni-list-item>
					 <uni-list-item title="我的收藏" thumb="/static/images/user/shouchang.png" thumbSize="sm"   link to="/pages/user/collect"  :border="false"></uni-list-item>
					 <uni-list-item title="帮助与反馈" thumb="/static/images/user/help.png" @click="help" thumbSize="sm" showArrow="false" link to="/pages/vue/index/index"  :border="false"></uni-list-item>
					 <view @tap="$wanlshop.phone('0371-223333')"><uni-list-item title="联系我们" thumb="/static/images/user/kefu.png" thumbSize="sm" :showArrow="false" rightText="0371-223333" to="/pages/vue/index/index"  :border="false"></uni-list-item></view>
					 <uni-list-item title="设置" thumb="/static/images/user/setting.png" @click="setting" thumbSize="sm"  link to="/pages/vue/index/index"  :border="false"></uni-list-item>
				    <!-- <uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" :border="false"></uni-list-item> -->
				</uni-list>	
			</view>
		</view>

		</view>
	
		
		<view class="edgeInsetBottom"></view>
	</view>
</template>

	<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			headerOpacity: 0,
			// 上拉刷新
			reload: true,
			likeData: [],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			is_host:0,
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			roleDic: {
				'0': '无',
				'1': '待审核代理商',
				'2': '体验版代理商',
				'3': '成长版代理商',
				'4': '普通代理商',
				'5': '高级代理商',
				'6': '普通业务经理',
				'7': '高级业务经理',
			}
		};
	},
	computed: {
		...mapState(['user', 'statistics','common'])
	},
	onPullDownRefresh() {
		this.loadData();
	},
	onShow() {
		setTimeout(()=> {
			uni.setNavigationBarColor({  
				frontColor: this.$store.state.common.appStyle.user_font_color == 'light'?'#ffffff':'#000000',  
				backgroundColor: this.$store.state.common.appStyle.user_nav_color
		    })  
		}, 200);
	},
	onLoad() {
		if (this.$store.state.user.isLogin) {
			this.loadData();
		}
		this.loadlikeData();
	},
	onPageScroll(e) {
		let tmpY = 50;
		e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
		this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadlikeData();
		}
	},
	methods: {
		async loadData() {
			this.$api.post({
				url: '/wanlshop/user/refresh',
				success: res => {
					this.$store.commit('statistics/edit', res.statistics);
					this.$store.commit('user/setUserInfo', res.userinfo);
				}
			});
			this.$api.post({
				url: '/wanlshop/host/index',
				success: res => {
					if(res){
						console.log(res)
						if(res.status == 1){
							this.is_host = 1
						}
					}
				}
			});
			
			this.$api.post({
				url: '/wanlshop/agent/index',
				success: res => {
					if(res){
						if(res.status == 1){
							this.is_host = 2
						}
					}
				}
			});
			
			uni.stopPullDownRefresh();
		},
		// 滚动底部加载猜你喜欢
		async loadlikeData() {
			this.$api.get({
				url: '/wanlshop/product/likes?pages=user',
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		// 帮助
		help() {
			this.$wanlshop.to('/pages/user/help');
		},
		host(){
			this.$api.post({
				url: '/wanlshop/host/index',
				success: res => {
					if(res !=null){
						if(res.status == 1){
							uni.navigateTo({
								url:'/pages/user/hostInfo'
							})
						}else{
							uni.navigateTo({
								url:'/pages/user/host'
							})	
						}
						
					}else{
						uni.navigateTo({
							url:'/pages/user/host'
						})	
					}
					
					return;
				}
			});
		},
		agent(){
			this.$api.post({
				url: '/wanlshop/agent/index',
				success: res => {
					if(res !=null){
						if(res.status == 1){
							uni.navigateTo({
								url:'/pages/user/agentInfo'
							})
						}else{
							uni.navigateTo({
								url:'/pages/user/agent'
							})	
						}
						
					}else{
						uni.navigateTo({
							url:'/pages/user/agent'
						})	
					}
					
					return;
				}
			});
		},
		staff(){
			this.$api.post({
				url: '/wanlshop/staff/index',
				success: res => {
					console.log(res)
					if(res !=null){
						if(res.status == 1){
							uni.navigateTo({
								url:'/pages/user/staffInfo'
							})
						}else{
							uni.navigateTo({
								url:'/pages/user/staff'
							})	
						}
						
					}else{
						uni.navigateTo({
							url:'/pages/user/staff'
						})	
					}
					
					return;
				}
			});
		},
		agentPlatform(){
			this.$api.post({
				url: '/wanlshop/Agentplatform/index',
				success: res => {
					console.log(res)
					if(res !=null){
						if(res.promoter_type != 0){
							uni.navigateTo({
								url:'/pages/user/agentPlatformInfo'
							})
						}else{
							uni.navigateTo({
								url:'/pages/user/agentPlatform'
							})	
						}
						
					}else{
						uni.navigateTo({
							url:'/pages/user/agentPlatform'
						})	
					}
					
					return;
				}
			});
		},
		// 设置
		setting() {
			this.$wanlshop.to('/pages/user/setting/setting');
		},
		portrai() {
			this.$wanlshop.to('/pages/user/portrait/portrait');
		}
	}
};
</script>

<style>
	.uni-list-item__content-title{
		font-size: 30rpx!important;
	}
	.uni-list-item__container{
		padding: 28rpx 28rpx!important;
	}
	
	.uni-list-item__extra-text{
		font-size: 30rpx!important;
		color: #12B8F6!important;
	}
	.bt-images{
		width: 26rpx;
		height: 26rpx;
	}
	.bt-image{
		margin-left: 440rpx;
	}
	.bottom{	
		    width: 100%;
		    margin: auto;
			padding: 25rpx;
	}
	.bt-menu{
		padding: 20rpx;
	}
	.menu-text{
		font-size: 30rpx;
	    font-weight: 600;
	}
.cu-bar .action.mp:first-child > text[class*='wlIcon-'] {
	margin-left: 0;
}
.text-xxl{
	width: 70%;
	color: #FFFFFF;
	font-size: 35rpx;
}
.order_image{
	height: 90rpx;
	width: 90rpx;
}
.wanl-user {
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}

.wanl-user .user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
}
.zhubo{
	position: absolute;
	background-color: #FF9800;
	padding: 0 7rpx;
	z-index: 1000;
	bottom: 12rpx;
	right: 21rpx;
	border-radius: 25rpx 25rpx;
	color: white;
}
.zhubo1{
	position: absolute;
	background-color: #FF9800;
	padding: 0 7rpx;
	z-index: 1000;
	bottom: 5rpx;
	right: 35rpx;
	border-radius: 25rpx 25rpx;
	color: white;
}


.wanl-user .user .avatar {
	position: relative;
	height: 150rpx;
	width: 150rpx;
	border-radius: 5000rpx;
	overflow: hidden;
	border: 3px solid #FFFFFF;
}

.wanl-user .user .avatar image {
	height: 120rpx;
}

.wanl-user .user .avatar .tag {
	position: absolute;
	bottom: 0;
	right: 0;
}

.wanl-user .user .content {
	flex: 1;
}

/* 操作 */
.wanl-user .operate {
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding-bottom: 70rpx;
	line-height: 1.3;
}

.wanl-user .operate text {
	display: block;
	font-size: 32rpx;
}

/* 活动 */
.wanl-user .activity {
	/* position: absolute; */
	margin: auto;
	width: 90%;
	bottom: 57rpx;
}

.wanl-user .activity .radius {
	border-radius: 24rpx 24rpx 0 0;
}

.wanl-user .activity .cu-avatar {
	width: 69rpx;
	height: 69rpx;
	margin-right: 30rpx;
	background-color: transparent;
	/* border: 1px solid rgba(255,255,255,.6); */
}

.wanl-user .activity .content {
	text-align: left;
	height: 68rpx;
}

/* 订单 */
.wanl-user-order {
	height: 270rpx;
	margin-top: -30rpx;
	border-radius: 24rpx 24rpx 0 0;
	background-color: white;
}

.wanl-user-order .title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.wanl-user-order .title text {}



/* 状态 */
.wanl-user-order .project {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.wanl-user-order .project>view {
	position: relative;
	flex: 1;
}

.wanl-user-order .project>view .cu-tag {
	top: -4rpx;
	right: 26rpx;
}

.wanl-user-order .project text {
	display: block;
	font-size: 50rpx;
	margin-bottom: 6rpx;
}

/* 物流 */
.wanl-user-order .logistics {
	background-color: #f9f9f9;
	border-radius: 24rpx;
}

.wanl-user-order .logistics .swiper {
	height: 120rpx;
}

.wanl-user-order .logistics .swiper .title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
	color: #999999;
}

.wanl-user-order .logistics .swiper .cu-avatar {
	margin-right: 10rpx;
	height: 66rpx;
	width: 66rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}

.wanl-user-order .logistics .swiper .content .text-df {
	color: #3797e0;
	font-size: 27rpx;
	margin-bottom: 2rpx;
}
.wanl-user-order .logistics .swiper .content .text-sm {
	color: #999999;
}

.wanl-user-order .logistics .swiper .content text {
	font-size: 32rpx;
	margin-left: 15rpx;
	margin-right: 10rpx;
}

/* 工具箱 */
.wanl-user-tool {
	background-color: #ffffff;
	border-radius: 24rpx;
}

.wanl-user-tool .title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.wanl-user-tool .title text {
	margin-left: 2rpx;
}

/* 状态 */
.wanl-user-tool .list {
	text-align: center;
}

.wanl-user-tool .list>view {
	margin-bottom: 28rpx;
	position: relative;
}
.wanl-user-tool .list>view .cu-tag {
	top: -8rpx;
	left: 80rpx;
	right: unset;
}

.wanl-user-tool .list text {
	display: block;
	font-size: 54rpx;
	margin-bottom: 8rpx;
}
.pallet-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
